<html>
<head>
    <title>HTTP-Flv Test</title>
</head>
<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script src="../dist/flv.js" type="text/javascript"></script>
<body style="background-color: #666666">
<table>
    <tr>
        <td>
            <div id="video1"
                 style="background-color: #333333;border-radius: 10px; overflow: hidden; "></div>
        </td>
        <td>
            <div id="video2"
                 style="background-color: #333333;border-radius: 10px; overflow: hidden; "></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="video3"
                 style="background-color: #333333;border-radius: 10px; overflow: hidden;"></div>

        </td>
        <td>
            <div id="video4"
                 style="background-color: #333333;border-radius: 10px; overflow: hidden; "></div>
        </td>
    </tr>

    <!-- <div class="video-container">
        <div>
            <video name="videoElement" class="centeredVideo" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
        </div>
    </div> -->
</table>
<input type="checkbox" id="ck1" checked="checked"/>1
<input type="checkbox" id="ck2" />2
<input type="checkbox" id="ck3" />3
<input type="checkbox" id="ck4" />4
<input id="mobile" value="18812345678">
<input type="checkbox" id="sub" checked="checked"/>Substream
<button onclick="playVideo()">Play Video</button>
<button onclick="closeVideo()">Close Video</button>

<script type="text/javascript">
    /**
     * 创建一个FLV播放器，参数如下：013800138999-2
     * {
 *      container : 视频容器元素
 *      muted     : 是否静音
 *      url       : HTTP-FLV地址
 * }
     */
    var count = 0;
    function FLVPlayer(opts) {
        var videoElement = document.createElement('VIDEO');
 
        videoElement.autoplay = true;
        videoElement.controls = false;
        videoElement.muted = false;
        videoElement.style.width = '100%';
        videoElement.style.height = '100%';
        //opts.container.remove();
        opts.container.append(videoElement);

        this.container = opts.container;
        this.videoElement = videoElement;
        this.httpFlvURL = opts.url;

        this.mediaInfo = null;
        this.play = null;
        this.onPlayEvtListener = null;
        this.onPauseEvtListener = null;
        this.onStopEvtListener = null;

        this.autoFastForward = opts.autoFastForward;
        this.autoFastForwardInterval = null;

        this.play = function () {
            if (this.player) return;

            var self = this;
            self.player = new flvjs.createPlayer({
                type: 'flv',
                url: self.httpFlvURL,
                isLive: true,
                enableWorker: true,
                enableStashBuffer: true,
                autoCleanupSourceBuffer: true,
                autoCleanupMaxBackwardDuration: 10,
                autoCleanupMinBackwardDuration: 1
            });

            self.player.on('media_info', function () {
                self.mediaInfo = self.player.mediaInfo;
            });

            self.player.on('statistics_info', function () {
                //console.log(arguments);
            });

            var autoPlayTimer = null;
            self.videoElement.addEventListener('player', function (e) {
                if (autoPlayTimer) clearInterval(autoPlayTimer);
                if (self.onPlayEvtListener) self.onPlayEvtListener(self, e);
            });
            self.videoElement.addEventListener('dblclick', function () {
                if (self.videoElement.requestFullscreen) self.videoElement.requestFullscreen();
            });
            autoPlayTimer = setInterval(function () {
                try {
                    self.player.play();
                } catch (e) {
                    clearInterval(autoPlayTimer);
                }
                ;
            });

            self.player.attachMediaElement(self.videoElement);
            self.player.load();
            self.player.play();

            if (this.autoFastForward) this.autoFastForwardInterval = setInterval(function () {
                if (self.videoElement.buffered.length > 0 && self.videoElement.buffered.end(0) - self.videoElement.currentTime > 2) {
                    console.log(self.videoElement.buffered.end(0) + "-" + self.videoElement.currentTime);
                    self.videoElement.currentTime = self.videoElement.buffered.end(0) - 1;
                }
            }, 1000);
        };

        this.fullscreen = function () {
            if (this.videoElement && this.videoElement.requestFullscreen)
                this.videoElement.requestFullscreen();
        };

        this.onPlay = function (fn) {
            this.onPlayEvtListener = fn;
        };

        this.destroy = function () {
            console.log("destroy");
            this.player.pause()
            this.player.unload()
            this.player.detachMediaElement()
            this.player.destroy();
            clearInterval(this.autoFastForwardInterval);
            //this.videoElement = null;
            //opts.container.remove(this.videoElement);
            this.player = null;
        }
    }
</script>
<script type="text/javascript">
    var videoPlayer =[];

    if (location.hash) {
        var hash = location.hash.substring(1);
        $('#mobile').val(hash);
    }

    function playVideo() {
        var mobile =$('#mobile').val();
        var stream ="0";
        var subcheck =document.getElementById("sub");
        if(subcheck.checked){
            stream ="1";
        }
        for(var i=1;i<5;i++){
            var check = document.getElementById("ck"+i);
            if(!check.checked) {
                continue;
            }
            var tag = mobile + ","+ i +",1,"+stream;
            videoPlayer[i] = new FLVPlayer({
                container: $('#video'+ i),
                url: 'ws://117.29.161.242:31034/websocket/video?onlineNo=100011111147&ch='+i+'&datatype=0&stream=0&access_token=eyJhbGciOiJIUzI1NiJ9.eyJ0ZW5hbnRfaWQiOiIxIiwidGVuYW50X25hbWUiOiLljqbpl6jmtbfmsqflhazkuqTpm4blm6IiLCJ1c2VyX25hbWUiOiJ4bWhjLXZpZGVvIiwidGVuYW50X2RldmljZV9ubyI6IjEwMDAiLCJwZXJzb25fbmFtZSI6Iuinhumikea1i-ivlSIsImNsaWVudF9pZCI6bnVsbCwiY2xpZW50X2FjY291bnQiOm51bGwsInVzZXJfdHlwZSI6MiwidXNlcl9pZCI6IjE0OTI4MjYxNDY1NTQ3NDg5MjkiLCJvcmdfaWQiOiIiLCJvcmdfbmFtZSI6bnVsbCwiZXhwIjoxNjU2Mjk4Mjc2LCJjbGllbnRfbmFtZSI6bnVsbCwidGVuYW50X2NvZGUiOiJ4bWhjIn0.0YkD2ZumsfyV0ehKwgDacmjHuF4PlYtwOWbct69XKR0',
                // 自动快进追祯，但是可能会导致画面停顿
                autoFastForward: false
            });
            videoPlayer[i].play();
        }
    }

    function closeVideo() {
        for(var i=1;i <5;i++){
            var check = document.getElementById("ck"+i);
            if(!check.checked) {
                continue;
            }
            if (videoPlayer[i] != undefined) {

                videoPlayer[i].destroy();

            }
        }

    }
</script>

</body>
</html>
